@import "../config.less";

body{
	color: #333333;
}
i{
	font-style: normal;
}
a{
	text-decoration: none;
}

.container{
	padding-bottom: 100/@r;
}

.banner{
	width: 100%;
	img{
		width: 100%;
	}
}

.product-name{
	padding-left: 20/@r;
	padding-right: 20/@r;
	margin-top: 8/@r;
	font-size: 28/@r;
	display: -webkit-box;
	-webkit-box-orient: vertical;
  	-webkit-line-clamp: 2;
	overflow: hidden;
	line-height: 34/@r;
}

.product-price{
	padding-left: 20/@r;
	padding-right: 20/@r;
	display: flex;
	justify-content: space-between;
	margin-top:10/@r;
	.product-price-left{
		font-size: 20/@r;
		transform: scale(0.85);
		transform-origin: left;

		i{
			font-size: 46/@r;
		}
		.jianyi{
			color: @common;
			margin-left: 34/@r;
		}
	}
	.product-price-right{
		font-size: 20/@r;
		color: @common;
		transform: scale(0.85);
		transform-origin: right;
		text-align: right;
		p{
			line-height: 28/@r;
		}
	}
}

.title{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 80/@r;
	.title-text{
		font-size: 20/@r;
		margin: 0 10/@r;
		transform: scale(0.85);
	}
	.title-line{
		width: 200/@r;
		height: 2/@r;
		background-color: #E8E8E8;
	}
}

.img-content{
	margin-top: 50/@r;
	padding-left: 20/@r;
	padding-right: 20/@r;
	>div{
		width: 100%;
	}
	img{
		width: 100%;
	}
}

.desc-section{
	margin-top: 34/@r;
	.desc-item{
		padding-left: 50/@r;
		padding-right: 50/@r;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.desc-item-left{
		font-size: 20/@r;
		transform-origin: left;
		color: @grey;
		width: 154/@r;
	}
	.desc-item-right{
		display: flex;
		.desc-item-option{
			width: 160/@r;
			font-size: 20/@r;
			color: @common;
			text-align: center;
			margin-left: 6/@r;
			height: 50/@r;
			line-height: 50/@r;
		}
		.desc-item-option-block{
			background-color: #a2a4a5;
			color: @white;
			text-align: center;
		}
		.desc-item-option-block:first-child{
			border-top-left-radius: 25/@r;
			border-bottom-left-radius: 25/@r;
		}
		.desc-item-option-block:last-child{
			border-top-right-radius: 25/@r;
			border-bottom-right-radius: 25/@r;
		}
	}
	.desc-item + .desc-item{
		margin-top: 10/@r;
	}
	.desc-item-right-text{
		font-size: 20/@r;
		color: @common;
		width: 490/@r;
	}
}


.rate-section{
	margin-top: 50/@r;
	padding-left: 50/@r;
	padding-right: 50/@r;
	>div{
		display: flex;
		justify-content: space-between;
		font-size: 20/@r;
	}
	>div:nth-child(2){
		color: @grey;
	}
	img{
		width: 20/@r;
		height: 20/@r;
	}
	img{
		margin-left: 4/@r;
	}
	p{
		line-height: 28/@r;
	}
	.stars{
		display: flex;

	}
	.btn-group{
		margin-top: 24/@r;
		width: 100%;
		display: flex;
		justify-content: center;
	}
	.rate-btn{
		width: 156/@r;
		height: 42/@r;
		display: inline-block;
		background-color: @blue;
		text-align: center;
		line-height: 42/@r;
		color: @white;
		text-decoration: none;
	}
}

.standars-section{
	margin-top: 22/@r;
	margin-left: 20/@r;
	margin-right: 20/@r;
	border: 2/@r solid #e8e8e8;
	display: flex;
	flex-wrap: wrap;
	padding-bottom: 20/@r;
	.standars-item{
		width: 50%;
		display: flex;
		margin-top: 20/@r;
		.standars-item-left{
			width: 132/@r;
			padding-left: 20/@r;
			font-size: 20/@r;
			transform: scale(0.8);
			transform-origin: left;
			color: @grey;
			line-height: 22/@r;
		}
		.standars-item-right{
			width: 220/@r;
			font-size: 20/@r;
			transform: scale(0.8);
			transform-origin: left;
			line-height: 22/@r;
		}
	}
}

.footer-btn{
	position: fixed;
	width: 100%;
	bottom: 0;
	left: 0;
	height: 100/@r;
	background-color: @white;
	display: flex;
	.btn{
		width: 50%;
		height: 100/@r;
		font-size: 20/@r;
		text-align: center;
		line-height: 100/@r;
		border-top: 2/@r solid @blue;
	}
	.btn-left{
		color: @blue;
	}
	.btn-right{
		background-color: @blue;
		color: @white;
	}
}


.modal{
	position: fixed;
	width: 100%;
	left: 0;
	top: 0;
	bottom: 101/@r;
	background-color: rgba(0, 0, 0, 0.6);
	display: none;
	.modal-content{
		background-color: @white;
		position: absolute;
		width: 100%;
		left: 0;
		bottom: 0;
		padding-top: 48/@r;
		transform: rotateX(90deg);
		transform-origin: bottom;
		transition: 0.6s;
		.modal-title{
			padding-left: 20/@r;
			padding-right: 20/@r;
			font-size: 24/@r;
			color: @common;
			line-height: 30/@r;
		}
		.type-group{
			padding-left: 20/@r;
			margin-top: 20/@r;
			display: flex;
			.type-item{
				width: 120/@r;
				height: 40/@r;
				border: 2/@r solid #E8E8E8;
				color: @grey;
				margin-right: 30/@r;
				display: flex;
				justify-content: center;
				align-items: center;
				span{
					font-size: 20/@r;
					transform: scale(0.85);
					transform-origin: center center;
				}
			}
			.type-item-active{
				background-image: url("/img/select_icon.png");
				background-size: 20/@r;
				background-position: right bottom;
				background-repeat: no-repeat;
				border-color: @blue;
			}
		}
		.modal-price{
			margin-top: 48/@r;
			padding-left: 20/@r;
			color: @common;
			font-size: 24/@r;
			margin-bottom: 34/@r;
			line-height: 30/@r;
		}
		.input-group{
			margin-top: 24/@r;
			padding-left: 20/@r;
			margin-bottom: 96/@r;
			position: relative;
			input{
				width: 300/@r;
				height: 40/@r;
				border: 1/@r solid #999999;
				padding-left: 10/@r;
				padding-right: 10/@r;
				box-sizing: border-box;
			}
			span{
				font-size: 20/@r;
				color: @common;
			}
			.error{
				position: absolute;
				left: 20/@r;
				top: 65/@r;
				font-size: 24/@r;
				color: @red;
			}
			.input-error{
				border-color: @red;
			}
		}
	}
	.modal-content-active{
		transform: rotateX(0);
	}
}





